/**4个任务栏列表中的单个列表组件 */
import React from 'react';
import {List, Divider, Tag, Popover} from 'antd';
import CTaskListCon from './TaskListCon';

const TaskList = (props) => {
  return (
    <div style={{width: '25%'}}>
      <div className="task">
        <Divider>{props.title}</Divider>
        <List 
          style={{minHeight: "500px"}}
          bordered
          dataSource={props.data}
          rowKey={index => index}
          renderItem={(item, index) => (
            <List.Item>
              <Popover content={<CTaskListCon ctitle={props.title} _index={index} />} title="move this item to 👉" trigger="hover">
                <Tag color="#f50" className="task_tag">{index + 1}</Tag>
              </Popover>
              {item}
            </List.Item>
          )}
        />
      </div>
    </div>
  )
}

export default TaskList;